<template>
  <div class="index">
    
    <div class="conetent-nav" style="position:fixed;">
        <div class="conetent-nav-head">
            <img src="/images/logo.png" class="logo1" @click="Goindex()">
            <ul>
                <li v-for="(item,index) in tablesList" :key="index" :class="tablesListindex ==index?'selctestye':''" @click="checket(index)">{{item}}</li>
                <li class="conetent-nav-my-center" >
                    <div class="login" v-if="IsLogins">
                      <el-menu class="el-menu-demo" mode="horizontal">
                        <el-submenu index="2" style="bockground:none;margin-top:-25px">
                          <img :src="avatar" slot="title" alt="" class="title"/>
                          <el-menu-item @click="Topersonil">个人中心</el-menu-item>
                          <el-menu-item @click="Logout">退出登录</el-menu-item>
                        </el-submenu>
                      </el-menu>
                    </div>
                    <div class="login" v-else>
                      <button @click="GoLogin" style="margin-left:14px;">登录</button>
                      <button @click="outerVisible = true">注册</button>
                    </div>
                </li>
            </ul>
        </div>
    </div>

    <div class="banner">
      <!--swiper轮播图-->
      <div class="swiper-container">
        <div v-if="Isscroll" class="banners">
          <div class="banner-head">
            <!-- <div class="logo">
              <img src="/images/logo.png" />
            </div> -->
            <!-- <div class="banner-headright">
              <div @click="donwnlaods" class="download">
                <span>客户端下载</span>
              </div>
              <div class="search">
                <input type="text" placeholder="搜索课程或老师" autocomplete="off" />
              </div>
              <div class="login" v-if="IsLogins">
                <el-menu class="el-menu-demo" mode="horizontal">
                  <el-submenu index="2">
                    <template slot="title">个人中心</template>
                    <el-menu-item @click="Topersonil">个人中心</el-menu-item> -->
                    <!-- <el-menu-item>切换账号</el-menu-item> -->
                    <!-- <el-menu-item @click="Logout">退出登录</el-menu-item>
                  </el-submenu>
                </el-menu>
              </div>
              <div class="login" v-else>
                <button @click="GoLogin">登录</button>
                <button @click="outerVisible = true">注册</button>
              </div>
            </div> -->
          </div>
          

          <div class="bannerform">
            <div class="form-banner">
              <label for>
                <input type="tel" style="text-aling:center" name="phone" v-model="phoneNumbercode" placeholder="请输入您的手机号" autocomplete="off"/>
              </label>
              <label>
                <input type="number" class="inputcode" v-model="Code" autocomplete="off" name="code"/>
                <input class="getcode" type="button" v-show="show" name="getcode" @click.prevent="checkcode" value="发送验证码"/>
                <span class="getcodes countdisabled" v-show="!show">{{count}} s</span>
              </label>
              <label>
                <input class="sendcode" type="button" @click.prevent="GoLgCode" name="sendcode" value="免费领取"/>
              </label>
            </div>
          </div>
        </div>
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <div class="swiperd-1"></div>
          </div>
          <div class="swiper-slide">
            <div class="swiperd-2"></div>
          </div>
          <div class="swiper-slide">
            <div class="swiperd-3"></div>
          </div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
      </div>
    </div>
    <div class="nav">
      <div>
        <div>
          <span>语言</span>
          <el-select @change="getclasslist()" v-model="value" filterable placeholder="请选择语言">
            <el-option
              v-for="(item,index) in options"
              :key="index"
              :label="item.name"
              :value="item.spell"
            ></el-option>
          </el-select>
        </div>
        <ul>
          <li
            v-for="(item,index) in navList"
            :key="index"
            :class="navListIndex ==index?'navelecet':''"
            @click="SelectNav(index)"
          >{{item}}</li>
        </ul>
      </div>
    </div>
    <div class="content">
      <div class="head-content">
        <div class="head-contents">
          <i class="i-left"></i>
          <span>免费体验课</span>
          <i class="i-right"></i>
        </div>
        <div class="head-box" v-if="navListIndex==0">
          <div v-if="DetailsClassroomList.length == 0" class="nodatads">
            <img src="/images/暂无课程安排.png" alt="">
            <span>暂无直播课程</span>
          </div>
          <ul v-else>
            <li v-for="(item,index) in DetailsClassroomList" :key="index" @click="Toclassroom(item)">
              <img :src="item.cover" class="box-img" />
              <div class="Classidentification">
                <img src="/images/LIVE.png" />
                <span>{{item.age_grade}}·{{item.language_level}}</span>
              </div>
              <div class="about-box">
                <p>{{item.title}}</p>
                <p style="color:#FF5757;font-size:18.03px;">{{item.language}}</p>
                <p>
                  <span v-if="item.days ==0 & item.minutes == 0">距离开课{{item.hours}}小时</span>
                  <span v-else-if="item.days == 0 & item.hours == 0">距离开课{{item.minutes}}分钟</span>
                  <span v-else-if="item.Isend == 0">已结束</span>
                  <span v-else>距离开课{{item.days}}天</span>
                  <span class="audition">去试听</span>
                </p>
              </div>
            </li>
          </ul>
        </div>
        <div class="head-box" v-else-if="navListIndex==1">
          <div v-if="DetailsClassroomList.length == 0" class="nodatads">
            <img src="/images/暂无课程安排.png" alt="">
            <span>暂无直播课程</span>
          </div>
          <ul v-else>
            <li v-for="(item,index) in DetailsClassroomList" :key="index" @click="Toclassroom(item)">
              <img :src="item.cover" class="box-img" />
              <div class="Classidentification">
                <img src="/images/LIVE.png" />
                <span>{{item.age_grade}}·{{item.language_level}}</span>
              </div>
              <div class="about-box">
                <p>{{item.title}}</p>
                <p style="color:#FF5757;font-size:18.03px;">{{item.language}}</p>
                <p>
                  <span v-if="item.days ==0 & item.minutes == 0">距离开课{{item.hours}}小时</span>
                  <span v-else-if="item.days == 0 & item.hours == 0">距离开课{{item.minutes}}分钟</span>
                  <span v-else-if="item.Isend == 0">已结束</span>
                  <span v-else>距离开课{{item.days}}天</span>
                  <span class="audition">去试听</span>
                </p>
              </div>
            </li>
          </ul>
        </div>
        <div class="head-box" v-else-if="navListIndex==2">
          <div v-if="DetailsClassroomList.length == 0" class="nodatads">
            <img src="/images/暂无课程安排.png" alt="">
            <span>暂无直播课程</span>
          </div>
          <ul v-else>
            <li v-for="(item,index) in DetailsClassroomList" :key="index" @click="Toclassroom(item)">
              <img :src="item.cover" class="box-img" />
              <div class="Classidentification">
                <img src="/images/LIVE.png" />
                <span>{{item.age_grade}}·{{item.language_level}}</span>
              </div>
              <div class="about-box">
                <p>{{item.title}}</p>
                <p style="color:#FF5757;font-size:18.03px;">{{item.language}}</p>
                <p>
                  <span v-if="item.days ==0 & item.minutes == 0">距离开课{{item.hours}}小时</span>
                  <span v-else-if="item.days == 0 & item.hours == 0">距离开课{{item.minutes}}分钟</span>
                  <span v-else-if="item.Isend == 0">已结束</span>
                  <span v-else>距离开课{{item.days}}天</span>
                  <span class="audition">去试听</span>
                </p>
              </div>
            </li>
          </ul>
        </div>
        <div class="head-box" v-else-if="navListIndex==3">
          <div v-if="DetailsClassroomList.length == 0" class="nodatads">
            <img src="/images/暂无课程安排.png" alt="">
            <span>暂无直播课程</span>
          </div>
          <ul v-else>
            <li v-for="(item,index) in DetailsClassroomList" :key="index" @click="Toclassroom(item)">
              <img :src="item.cover" class="box-img" />
              <div class="Classidentification">
                <img src="/images/LIVE.png" />
                <span>{{item.age_grade}}·{{item.language_level}}</span>
              </div>
              <div class="about-box">
                <p>{{item.title}}</p>
                <p style="color:#FF5757;font-size:18.03px;">{{item.language}}</p>
                <p>
                    <span v-if="item.days ==0 & item.minutes == 0">距离开课{{item.hours}}小时</span>
                    <span v-else-if="item.days == 0 & item.hours == 0">距离开课{{item.minutes}}分钟</span>
                    <span v-else-if="item.Isend == 0">已结束</span>
                    <span v-else>距离开课{{item.days}}天</span>
                  <span class="audition">去试听</span>
                </p>
              </div>
            </li>
          </ul>
        </div>
        <div class="head-box" v-else-if="navListIndex==4">
          <div v-if="DetailsClassroomList.length == 0" class="nodatads">
            <img src="/images/暂无课程安排.png" alt="">
            <span>暂无直播课程</span>
          </div>
          <ul v-else>
            <li v-for="(item,index) in DetailsClassroomList" :key="index" @click="Toclassroom(item)">
              <img :src="item.cover" class="box-img" />
              <div class="Classidentification">
                <img src="/images/LIVE.png" />
                <span>{{item.age_grade}}·{{item.language_level}}</span>
              </div>
              <div class="about-box">
                <p>{{item.title}}</p>
                <p style="color:#FF5757;font-size:18.03px;">{{item.language}}</p>
                <p>
                  <span v-if="item.days ==0 & item.minutes == 0">距离开课{{item.hours}}小时</span>
                  <span v-else-if="item.days == 0 & item.hours == 0">距离开课{{item.minutes}}分钟</span>
                  <span v-else-if="item.Isend == 0">已结束</span>
                  <span v-else>距离开课{{item.days}}天</span>
                  <span class="audition">去试听</span>
                </p>
              </div>
            </li>
          </ul>
        </div>
        <div class="lookAll">
          <span @click="GotoLiveclassroomDetial()">查看全部 ></span>
        </div>
      </div>
      <div class="tug">
        <div class="head-contents">
          <i class="i-left"></i>
          <span>热门私教</span>
          <i class="i-right"></i>
        </div>
        <div class="cards">
          <div class="swiper-containers">
            <div class="swiper-wrapper">
              <div class="swiper-slide" v-for="(sitems,sindexs) in slides" :key="sindexs" :style="{backgroundImage: 'url(' + sitems.photo + ')'}" @click="tosijiao(sitems)"></div>
            </div>
          </div>
        </div>
        <div class="lookAll" >
          <span @click="gosijiaoList">查看全部 ></span>
        </div>
      </div>
      <div class="tug affiliates">
          <div class="head-contents">
            <i class="i-left"></i>
            <span>合作机构</span>
            <i class="i-right"></i>
            <p>深度合作  更多外教  上课更便捷</p>
          </div>
          <div class="affiliates-content" >
            <ul>
              <li v-for="(Iconitem,Iconindex) in affiliatesImg" :key="Iconindex" @click="Toagenc(Iconitem)">
                  <div class="tile">
                    <img :src="Iconitem.mechanism_logo" class="tu">
                    <div class="text">
                      <h1 class="animate-text">{{Iconitem.mechanism_name}}</h1>
                      <label class="infosd animate-text">
                        <h2>{{Iconitem.mechanism_telephone}}</h2>
                        <img src="/images/进入机构图标.png" alt="">
                      </label>
                      
                      <p class="animate-text">{{Iconitem.mechanism_addr}}</p>
                    </div>
                  </div>
              </li>
            </ul>
          </div>
          <div class="lookAll">
            <span @click="Toinstitutions">查看全部 ></span>
          </div>
        </div>
      <div class="Themodule">
        <img src="/images/模块二 拷贝.png" />
      </div>
      
      <div class="liveinstructor">
        <div class="head-contents">
          <i class="i-left"></i>
          <span>外语直播课堂讲师</span>
          <i class="i-right"></i>
        </div>
        <div class="liveinstructor-box">
          <ul>
            <li v-for="(item,index) in liveinstructorList" :key="index">
              <div>
                <img :src="item.imgUrl" />
              </div>
              <div>
                <span>{{item.tetx1}}</span>
                <span>{{item.tetx2}}</span>
              </div>
            </li>
          </ul>
          
        </div>
      </div>
      <!--用户注册-->
      <el-dialog width="30%" title="用户注册" :visible.sync="outerVisible" @close='closeDialog'>
        <label class="registered">
          <input type="tetx" name="tellphone" v-model="account" placeholder="输入手机号或邮箱" />
        </label>
        <label class="registered-code">
          <input type="tetx" name="tellphone" v-model="verification" placeholder="输入验证码" />
          <span @click="getVerification" v-if="!isSetTime">获取验证码</span>
          <span style="background:#ccc;color:999;cursor:no-drop;" v-if="isSetTime">重新发送({{setTime}}s)</span>
        </label>
        

          <div class="registration-information">
            <label class="password">
              <input type="password" name="password" v-model="rePassword" placeholder="请设置密码" />
            </label>
            <label class="nickname">
              <input type="tetx" name="tellphone" placeholder="昵称" v-model="nick_name"/>
            </label>
            <label class="Head-portrait" style="height: 89px;">
                <span>头像</span>
               <el-upload
                    class="avatar-uploader"
                    :action="domain"
                    :show-file-list="false"
                    :data="QiNiYun"
                    :on-success="handleAvatarSuccess">
                    <img v-if="imageUrl" :src="imageUrl" class="avatar" >
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </label>
            <label class="registration-sex" style="padding-left:15px;">
              <span style="position: absolute;top: 360px;left: 360px;">性别</span>
              <el-radio-group v-model="radio">
                <el-radio-button label="男"></el-radio-button>
                <el-radio-button label="女"></el-radio-button>
              </el-radio-group>
            </label>
            <label class="registration-timer">
              <el-date-picker v-model="registrationtimer" type="date" placeholder="出生日期"></el-date-picker>
            </label>
            <label class="Personal-interests">
              <el-select v-model="Personalinterestsbalue" placeholder="个人爱好">
                <el-option
                  v-for="items in Personalinterests"
                  :key="items.id"
                  :label="items.value"
                  :value="items.id"
                ></el-option>
              </el-select>
            </label>
          </div>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="nextWay">完成</el-button>
          </div>
      </el-dialog>
    </div>
    <div class="recruiting">
      <div class="recruiting-head">
        <img src="/images/招募标题.png" />
      </div>
      <div class="recruiting-con">
        <div class="Sendresume">
          <span>
            <label>发送个人简历信息到邮箱service@joingp.net 收到邮箱后我们将会在2-3个工作日联系你</label>
          </span>
        </div>
        <div>
          <img src="/images/or.png" />
        </div>
        <div>
          <div class="reservedphone">
            <input type="text" placeholder="预留联系电话" autocomplete="off" />
            <input type="submit" style="background:#ffffff" />
          </div>
        </div>
      </div>
    </div>
    <!-- <div class="bannerform IsLogin" v-if="IsLogin">
      <ul>
        <li v-for="(itme,index) in LoginWay" :key="index" @click="SelectLogin(index)" :class="LoginWayIndex ==index?'selcclass':''" >{{itme}}</li>
      </ul>
      <div class="form-Login-phone" v-if="LoginWayIndex==0">
        <label for>
          <input type="tel" style="text-align:center" name="phone" v-model="phoneNumbercode" placeholder="请输入您的手机号" autocomplete="off"/>
        </label>
        <label>
          <input type="number" class="inputcodes" style="text-align:center" v-model="Code" autocomplete="off" name="code"/>
          <span class="getcodes" v-show="show" @click="checkcode">获取验证码</span>
          <span class="getcodes countdisabled" v-show="!show">{{count}} s</span>
        </label>
        <label>
          <input class="sendcodes" type="button" name="sendcode" @click.prevent="GoPasswordCode" value="登录"/>
        </label>
      </div>
      <div v-else-if="LoginWayIndex==1">
        <div class="pass-logo">
          <label for>
            <input type="tel" name="text" v-model="phoneNumber" placeholder="请输入您的手机号" autocomplete="off"/>
          </label>
          <label>
            <input type="password" class="password" v-model="Password" autocomplete="off" placeholder="请输入您的密码" name="password"/>
          </label>
          <label>
            <input class="sendcode" type="button" name="sendcode" @click.prevent="GoPassword()" value="登录"/>
          </label>
        </div>
      </div>
    </div>
    <div class="over" v-if="IsLogin" @click="closedenglu"></div> -->
    <Denglu v-if="IsLogin" :IsLogin.sync ='IsLogin' :IsLogins.sync ='IsLogins' :avatar.sync ='avatar'></Denglu>
    <div id="allmap"></div>
    <Footer></Footer>
  </div>
</template>

<script>
/* eslint-disable */
import Swiper from "swiper";
import "swiper/css/swiper.css";
import Denglu from '../../components/denglu'
import Footer from "../../components/footer";
import citys from '../../../public/citys/citys'
import { Carousel3d, Slide   } from 'vue-carousel-3d'
export default {
  name: "",
  data() {
    return {
      imageUrl:'/images/avatareg.jpg',
      QiNiYun:{
        key:'avatoravatoravatoravatoravatoravaysyysysyys',
        token:''
      },
      upload_qiniu_addr: "http://img.curiousmore.com/",
      domain: "http://up-z0.qiniup.com",
      qiniuaddr: "http://101.37.66.151:8768/eg-api/push/upload/getToken",
      tablesList:['主页','学习中心','教学中心','直播课堂','场景直播','客户端下载'],
      tablesListindex:0,//this.$route.query.index,
      nick_name:'',
      Thetheme:[
        {"Scene/Restaurant":"场景/餐馆"},
        {"Scene/Post Office":"场景/邮局"},
        {"Scene/Hospital and health scene":"场景/医院及健康场景"},
        {"Scene/Hotel":"场景/酒店"},
        {"Scene/Shopping mall":"场景/商场购物"},
        {"Scene/Work and work scenes":"场景/商场工作和上班场景购物"},
        {"Scene/Airport":"场景/机场"},
        {"Scene/Farm":"场景/农场"},
        {"Scene/Campus":"场景/校园"},
        {"Scene/Travel":"场景/旅行"},
        {"Scene/Supermarket":"场景/超市"},
        {"Scene/Drive":"场景/驾驶"},
        {"Scene/Wedding":"场景/婚礼"},
        {"Scene/Cinema":"场景/电影院"},
        {"Scene/Entertainment place":"场景/娱乐场所"},
        {"Scene/Gymnasium":"场景/体育馆"},
        {"Scene/Museum":"场景/博物馆"},
        {"Scene/Bar or KTV":"场景/酒吧或KTV"},
        {"Topic/Self introduction":"主题/自我介绍"},
        {"Topic/Learning and education":"主题/学习教育"},
        {"Topic/Talk about music":"主题/聊聊音乐"},
        {"Topic/Talk about family":"主题/聊聊家人"},
        {"Topic/Talk about dressing":"主题/聊聊穿着"},
        {"Topic/Talk about friends":"主题/聊聊朋友"},
        {"Topic/Talk about delicious food":"主题/聊聊美食"},
        {"Topic/Festivals and customs":"主题/节日和习俗"},
        {"Topic/Talk about variety show":"主题/聊聊综艺节目"},
        {"Topic/Talk about the near future plan":"主题/聊聊近期计划"},
        {"Topic/Talking about hobbies":"主题/聊聊爱好"},
        {"Topic/Talk about learning":"主题/聊聊学习"},
        {"Topic/Talk about TV series":"主题/聊聊电视剧"},
        {"Topic/Talk about movies":"主题/聊聊电影"},
        {"Topic/Talk about work":"主题/聊聊工作"},
        {"Topic/How to learn the language well":"主题/怎么学好这个语言"},
        {"Topic/About tourism":"主题/关于旅游"},
        {"Topic/Talk about geography":"主题/聊聊地理"},
        {"Topic/Talking about ideals":"主题/谈谈理想"},
        {"Topic/Talk about love":"主题/聊聊爱情"},
        {"Topic/Talk about the weather":"主题/聊聊天气"},
        {"Topic/Talk about some interesting things":"主题/聊一些趣事"},
      ],
      isSetTime:false,
      account: "",
      verification: "",
      navList: ["推荐", "儿童", "少年", "大学生", "成年"],
      navListIndex: 0,
      liveinstructorList: [
        {
          imgUrl: "/images/icon1.png",
          tetx1: "最实用外语",
          tetx2: "直播教学工具"
        },
        {
          imgUrl: "/images/icon2.png",
          tetx1: "交流闲谈",
          tetx2: "收益兼得"
        },
        {
          imgUrl: "/images/icon3.png",
          tetx1: "线上授课",
          tetx2: "安全可靠"
        },
        {
          imgUrl: "/images/icon4.png",
          tetx1: "碎片时间 ",
          tetx2: "自由安排"
        },
        {
          imgUrl: "/images/icon5.png",
          tetx1: "亦师亦友 ",
          tetx2: "巩固助学"
        },
        {
          imgUrl: "/images/icon6.png",
          tetx1: "触及更多  ",
          tetx2: "视野更广"
        },
        {
          imgUrl: "/images/icon7.png",
          tetx1: "献出爱心 ",
          tetx2: "收获自我"
        },
        {
          imgUrl: "/images/icon8.png",
          tetx1: "一份快乐 ",
          tetx2: "受人尊敬的事业"
        }
      ],
      options: [],
      value: "",
      scroll: "",
      Isscroll: true,
      IsLogin: this.$route.query.IsLogin,
      LoginWay: ["短信登录", "密码登录"],
      LoginWayIndex: 0,
      phoneNumber: "",
      Code: "",
      phoneNumbercode: "",
      Password: "",
      rePassword:'',
      show: true,
      count: "",
      timer: null,
      DetailsClassroomList: [],
      currentPage: 1,
      languageEn: [
        { Estonian: "爱沙尼亚语" },
        { Arabic: "阿拉伯语" },
        { Bulgarian: "保加利亚语" },
        { polish: "波兰语" },
        { Danish: "丹麦语" },
        { German: "德语" },
        { Russian: "俄语" },
        { "Traditional Chinese": "繁体中文" },
        { French: "法语" },
        { Finnish: "芬兰语" },
        { Korean: "韩语" },
        { Dutch: "荷兰语" },
        { Czech: "捷克语" },
        { romanian: "罗马尼亚语" },
        { Portuguese: "葡萄牙语" },
        { Japanese: "日语" },
        { Swedish: "瑞典语" },
        { slovenian: "斯洛文尼亚语" },
        { Thai: "泰语" },
        { Spanish: "西班牙语" },
        { Greek: "希腊语" },
        { hun: "匈牙利语" },
        { Italian: "意大利语" },
        { English: "英语" },
        { Vietnamese: "越南语" },
        { cantonese: "粤语" },
        { Chinese: "中文" },
        { Chinese: "不限" }
      ],
      age_grade: "", //年龄等级,
      outerVisible: this.$route.query.outerVisible,
      innerVisible: false,
      radio: "1",
      registrationtimer: "",
      Personalinterests: [
        {
          id: 1,
          value: "读书"
        },
        {
          id: 2,
          value: "运动"
        },
        {
          id: 3,
          value: "听音乐"
        },
        {
          id: 4,
          value: "游戏"
        }
      ],
      Personalinterestsbalue: "",
      unserinfo: JSON.parse(localStorage.getItem("userinfo")),
      avatar:JSON.parse(localStorage.getItem("userinfo")) == undefined?'':JSON.parse(localStorage.getItem("userinfo")).avatar,
      IsLogins: '',
      userData: "",
      setTime:60,
      slides: [
        // {photo: '/images/教师1.png'},
        // {photo: '/images/教师2.png'},
        // {photo: '/images/教师3.png'},
        // {photo: '/images/教师4.png'},
        // {photo: '/images/教师5.png'}
      ],
      longitude:'',
      latitude:'',
      affiliatesImg:[],
    };
  },
  created() {
      window.initBaiduMapScript = () => {
          this.getlocation();
      };
      this.loadBMap("initBaiduMapScript");
      this.getQiniuToken();
      var _this = this;
      document.onkeydown = function(e) {
          let key = window.event.keyCode;
          if (key == 27) {
              _this.submit();
          }
      };
  },
  methods: {
    submit: function() {
        this.IsLogin = false
    },
    closedenglu(){
      this.IsLogin = false
    },
    closeDialog(){
      this.imageUrl = '/images/avatareg.jpg'
      this.account = ''
      this.verification = ''
      this.rePassword = ''
      this.nick_name = ''
      this.registrationtimer = ''
      this.radio = '1'
      this.Personalinterestsbalue = ''
    },
    handleAvatarSuccess(res, file) {
        this.imageUrl = this.upload_qiniu_addr + res.key;
    },
    getQiniuToken() {
        var data ={
            key:'avatoravatoravatoravatoravatoravaysyysysyys',
            type:'pic'
        }
        this.$axios({
            method:'POST',
            url:'http://101.37.66.151:8768/eg-api/push/upload/getToken',
            data:data
        }).then((response) =>{
          this.QiNiYun.token = response.data.data;    
          console.log(response)    
        }).catch((error) =>{
            console.log(error)
        })
    },
    tiaozhuan(e){
      if(e == 1 ){
        console.log('去个人中心')
      }else if (e == 2 )[
        console.log('退出登录')
      ]
    },
    checket(e){
        
        this.tablesListindex = e
        this.$toTop()
        localStorage.setItem("tablesListindex",this.tablesListindex)
        if(this.IsLogins){
            if( this.tablesListindex == 0){
                this.$router.push({path:'/'})
            }else if(this.tablesListindex == 1){
                this.$router.push({path:'/views/Learningcenter/Liveclassroom',query: {index: 1}})
            }else if(this.tablesListindex == 2){
                this.$router.push({path:'/views/Teachingcenters/Livelectureinstructor',query: {index: 2}})
            }else if (this.tablesListindex ==3){
                this.$router.push({path:'/views/Liveclassroom/ClassRoomInfo',query: {index: 3}})
            }else if(this.tablesListindex == 4){
                this.$router.push({path:'/views/LiveScene/SceneRoomInfo',query: {index: 4}})
            }else if(this.tablesListindex == 5){
                this.$router.push({ path: "/views/Download",query: {index: 5}});
            }else if(this.tablesListindex == 7){
              console.log(this.Isend)
                if(this.Isend ==true){
                    this.$router.push({ path:'/views/Teachingcentercoursedetails',query: {id: this.Teachingcentercoursedetailsid,Isstudents:true,Isend:true}})
                }else if(this.Isend ==false){
                    this.$router.push({ path:'/views/Teachingcentercoursedetails',query: {id: this.Teachingcentercoursedetailsid,Isstudents:true,Isend:false}})
                }
            }else if(this.tablesListindex == 8){
              this.$router.push({ path:'/views/Listofinstitutions',query: {index:8,latitude:this.latitude, longitude:this.longitude,}})
            }
        }else{
          if( this.tablesListindex == 0){
              this.$router.push({path:'/'})
          }else if(this.tablesListindex == 5){
              this.$router.push({ path: "/views/Download",query: {index: 5}});
          }else if (this.tablesListindex == 3){
              this.$router.push({path: '/views/LiveclassroomDetial',query:{tablesListindex:3}})
          }else if (this.tablesListindex ==4){
              this.$router.push({path: '/views/LiveclassroomDetial',query:{tablesListindex:4}})
          }else{
              this.$message({duration:600,message:'请先登录',type:'warning'})
          }
        }
        
            // if( this.tablesListindex == 0){
            //     this.$router.push({path:'/views/Learningcenter/Liveclassroom'})
                
            // }else if(this.tablesListindex == 1){
            //     this.$router.push({path:'/views/Teachingcenters/Livelectureinstructor'})
                
            // }else if(this.tablesListindex == 2){
            //     this.$router.push({ path:'/views/Liveclassroom/ClassRoomInfo',})
            // }else if(this.tablesListindex == 3){
            //     this.$router.push({path:'/views/LiveScene/SceneRoomInfo'})
            // }else if(this.tablesListindex == 4){
            //     if(this.Isend ==true){
            //         this.$router.push({ path:'/views/Teachingcentercoursedetails',query: {id: this.Teachingcentercoursedetailsid,Isstudents:true,Isend:true}})
            //     }else if(this.Isend ==false){
            //         this.$router.push({ path:'/views/Teachingcentercoursedetails',query: {id: this.Teachingcentercoursedetailsid,Isstudents:true,Isend:false}})
            //     }
            // }else if(this.tablesListindex == 5){
            //     this.$router.push({ path:'/views/Listofinstitutions'})
            // }
    },
    getsijiaoList(){
            let _this = this
            let data = {
                latitude:localStorage.getItem('latitude'),
                longitude:localStorage.getItem('longitude'),
                status:2,
                type:'private_education',
                currentPage:1,
                pageSize:15,
            }
            console.log(data)
            _this.$axios({
                method:'get',
                url:'http://101.37.66.151:8768/eg-api/user/masterInfo/queryMasterListPage',
                params:data,
            }).then((res) =>{
                console.log(res.data)
                _this.slides = []
                _this.slides = res.data.data
            }).catch((error) =>{
                console.log(error)
            })
        },
    loadBMap(funcName) {
        var script = document.createElement("script");
        script.src = "http://api.map.baidu.com/api?v=2.0&ak=4wCTuvgtkfbqkOLQAv9jNFiP6qhYIH0E&callback=" + funcName;
        document.body.appendChild(script);
    },
    getlocation() {//获取经纬度
        let _this = this;
        this.$nextTick(function() {
            try {
                const geolocation = new BMap.Geolocation();
                geolocation.getCurrentPosition(function(r) {
                    localStorage.setItem("latitude", r.latitude);//纬度
                    localStorage.setItem("longitude", r.longitude);//经度
                });
                this.getsijiaoList()
                this.Getjigouinfo()
            } catch (e) {
                console.log(e);
            }
        });
        
    },
    tosijiao(e){
      console.log(e)
      if(this.IsLogins){
        this.$router.push({ path:'/views/Teachingcenters/Teachersdetails',query: {NavListIndex : 3,routerData :e.user_id}})
      }else{
        this.$message({duration:1000,message:'请先登录',type:'warning'})
      }
      
    },
    registerGoPassword(){
      var data = {
        login_name: this.account,
        login_pass: this.rePassword,
        login_type: "1"
      };
      this.$axios({
        method: "post",
        url: "http://101.37.66.151:8768/eg-api/user/user/login",
        data: data
      })
        .then(res => {
          //这里使用了ES6的语法
          console.log(res.data); //请求成功返回的数据
          if (res.data.code == 0) {
            var userinfo = res.data.data.userInfoEntity;
            console.log(userinfo);
            this.avatar = userinfo.avatar
            localStorage.setItem(
              "userinfo",
              JSON.stringify(res.data.data.userInfoEntity)
            );
            localStorage.setItem(
              "userSign",
              JSON.stringify(res.data.data.userSign)
            );
            this.$router.push({ path: "/views/Personalcenter",query: {index:0,}})
          } else if (res.data.code == 10005) {
            alert(res.data.message);
          }
        })
        .catch(error => {
          console.log(error); //请求失败返回的数据
        });
    },
    setPassWord(){
      let _this = this 
      let data = {
        login_name:_this.account,
        login_pass:_this.rePassword,
      }
      this.$axios({
        method: "post",
        url: "http://101.37.66.151:8768/eg-api/user/user/update",
        data: data
      }).then(res => {
          console.log(res,'设置成功')
          if(res.data.code == 0){
            _this.userinfoUpdate()//去设置头像
          }
      })
      .catch(error => {
        console.log(error); //请求失败返回的数据
      });
    },
    getCitiesList(){
      console.log(citys.cities)
        for(let x in citys.cities){
            citys.cities[x].map(item=>{
                this.options.push(item)
            })
        }
        console.log(this.options,'组装后的')
    },
    abc() {
        let _this = this
        var seconds = 60;
        var timeId = setInterval(function(){
                seconds--;
                _this.setTime = seconds;
                if(seconds == 0){
                    clearTimeout(timeId);
                    _this.isSetTime = false
                };
            },1000);
    },
    userinfoUpdate(){
      let _this = this
      let data = {
        avatar:_this.imageUrl,
        birth:_this.registrationtimer,
        nick_name:_this.nick_name,
      }
      this.$axios({
        method: "post",
        url: "http://101.37.66.151:8768/eg-api/user/userInfo/update",
        data: data
      }).then(res => {
          console.log(res.data.data);
          if(res.data.code == 0){
            _this.registerGoPassword()//用密码登录
          }
        }).catch(error => {
          console.log(error);
        });
    },
    register() {//注册接口
      let data = {
        login_name: this.account,
        verification_code: this.verification
      };
      this.$axios({
        method: "post",
        url: "http://101.37.66.151:8768/eg-api/user/user/register",
        data: data
      }).then(res => {
          console.log(res.data.data);
          if (res.data.code == 0) {
            this.userData = res.data.data;
            console.log('设置密码')
            this.setPassWord()//去设置密码
          } else if (res.data.code == 10016) {
            this.$message(res.data.message);
            this.outerVisible = false;
          } else {
            this.$message(res.data.message);
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    nextWay() {
      //检验验证码
      if (this.account == "") {
        this.$message("请输入账号");
        return;
      }
      if (this.verification == "") {
        this.$message("请输入验证码");
        return;
      }
      if(this.imgUrl == '/images/avatareg.jpg'){
        this.$message('请上传头像')
        return
      }
      if(this.rePassword == ""){
        this.$message("请输入密码");
        return;
      }else {
        let url, data;
        if (/@/.test(this.account)) {
          url = "mail/validate";
          data = {
            mail: this.account,
            code: this.verification
          };
        } else {
          url = "sms/validate";
          data = {
            mobile: this.account,
            code: this.verification
          };
        }
        
        this.$axios({
          method: "get",
          url: "http://101.37.66.151:8768/eg-api/user/" + url,
          params: data
        })
          .then(res => {
            console.log(res.data.data);
            if (res.data.data == true) {
              this.register();//去注册账号
            } else {
              this.$message(res.data.message);
            }
          })
          .catch(error => {
            console.log(error);
          });
      }
    },
    getVerification() {
      //获取验证码
      //account  verification
      if (this.account == "") {
        this.$message("请输入手机号或邮箱");
      } else {
        console.log(this.account);
        let url, data;
        if (/@/.test(this.account)) {
          url = "mail/send";
          data = {
            mail: this.account,
            type: ""
          };
        } else {
          url = "sms/send";
          data = {
            mobile: this.account,
            type: "register"
          };
        }
        this.$axios({
          method: "get",
          url: "http://101.37.66.151:8768/eg-api/user/" + url,
          params: data
        }).then(res => {
            console.log(res.data.data);
            if (res.data.code == 10016) {
              this.$message(res.data.message);
            }else if(res.data.code == 10006){
              this.$message(res.data.message)
            }else if (res.data.code == 0){
                this.abc()
                this.isSetTime = true
            }

          }).catch(error => {
            console.log(error);
          });
      }
    },
    Monitorscroll() {
      //监听滚动事件
      this.scroll =
        document.documentElement.scrollTop || document.body.scrollTop;
      if (this.scroll == 0) {
        this.Isscroll = true;
      } else if (this.scroll == 500) {
        this.Isscroll = false;
      }
    },
    Logout() {
      //退出登录
      localStorage.clear();
      location.reload();
    },
    getclasslist() {
      //获取课堂
      var _this = this;
      _this.DetailsClassroomList = [];
      var data = {
        type: "open_class",
        currentPage: _this.currentPage,
        pageSize: 5,
        language: _this.value
      };
      _this.$axios({
        method: "get",
        url:"http://101.37.66.151:8768/eg-api/user/masterAppointment/queryHomeListPage",
        params: data
        }).then(res => {
          _this.DetailsClassroomList = res.data.data;
          _this.DetailsClassroomList.forEach(function(i) {
            var days = _this.dateDiff(i.start_time)[0]
            if(days>0){
              i.days = _this.dateDiff(i.start_time)[0]
              i.hours =0
              i.minutes =0
            }else if(days==0&_this.dateDiff(i.start_time)[1]>0){
              i.days = 0
              i.minutes =0
              i.hours = _this.dateDiff(i.start_time)[1]                            
            }else if(_this.dateDiff(i.start_time)[1] == 0){
              i.days = 0
              i.hours =0
              i.minutes = _this.dateDiff(i.start_time)[2]
            }else if(_this.dateDiff(i.start_time)[2] ==0){
              console.log(i,'000')
              i.Isend = 1 
            }else{
              i.Isend = 0
            }
            if (i["age_grade"] == "Teenagers") {
              i["age_grade"] = "青少年";
            } else if (i["age_grade"] == "Childhood") {
              i["age_grade"] = "儿童";
            } else if (i["age_grade"] == "University Student") {
              i["age_grade"] = "大学生";
            } else if (i["age_grade"] == "Adult") {
              i["age_grade"] = "成年";
            }

            if (i["language_level"] == "Zero basis") {
              i["language_level"] = "零基础";
            } else if (i["language_level"] == "Senior") {
              i["language_level"] = "高级";
            } else if (i["language_level"] == "Intermediate") {
              i["language_level"] = "中级";
            } else if (i["language_level"] == "Primary") {
              i["language_level"] = "初级";
            }
            _this.languageEn.forEach(function(j) {
              if (j[i["language"]]) {
                i["language"] = j[i["language"]];
              }
            });
            _this.Thetheme.forEach(is=>{
                if(is[i['title']]){
                    i['title'] = is[i['title']]
                }
            })
          });
          console.log(this.DetailsClassroomList);
        })
        .catch(error => {
          console.log(error);
        });
    },
    dateDiff(sDate1) {
			var date2 = new Date();
      var date1 = new Date(Date.parse(sDate1.replace(/-/g,   "/")));
      var usedTime =date1.getTime()- date2.getTime()
      var days=Math.floor(usedTime/(24*3600*1000));
      if(days==0){
        var leave1=usedTime%(24*3600*1000);    //计算天数后剩余的毫秒数
        var hours=Math.floor(leave1/(60*60*1000));
        if(hours == 0){
          var leave2=leave1%(24*3600*1000);    //计算天数后剩余的毫秒数
          var minutes=Math.floor(leave2/(60*1000));
        }
      }else if(days == -1){
        var leave1s=usedTime%(24*3600*1000);    //计算天数后剩余的毫秒数
        var hours=Math.floor(leave1s/(60*60*1000));
        if(hours == -24){
          var leave2s=leave1s%(24*3600*1000);    //计算天数后剩余的毫秒数
          var minutess=Math.floor(leave2s/(60*1000));
        }               
      }
      return [days,hours,minutes];
    },
    handleCurrentChange(val) {
      //选择语言跟换内容
      this.currentPage = val;
      this.getclasslist();
    },
    SelectNav(e) {
      this.navListIndex = e;
      if (this.navListIndex == 0) {
        this.getclasslist();
      } else {
        if (this.navListIndex == 1) {
          this.age_grade = "Childhood";
        } else if (this.navListIndex == 2) {
          this.age_grade = "Teenagers";
        } else if (this.navListIndex == 3) {
          this.age_grade = "University Student";
        } else if (this.navListIndex == 4) {
          this.age_grade = "Adult";
        }
        this.getargelist();
      }
    },
    getargelist() {
      //获取年龄段
      var _this = this;
      _this.DetailsClassroomList = [];
      var data = {
        age_grade: _this.age_grade,
        pageSize: 5,
        language: _this.value
      };
      _this
        .$axios({
          method: "get",
          url:
            "http://101.37.66.151:8768/eg-api/user/masterAppointment/queryHomeListPage",
          params: data
        })
        .then(res => {
          _this.DetailsClassroomList = res.data.data;
          _this.DetailsClassroomList.forEach(function(i) {
            var days = _this.dateDiff(i.start_time)[0]
            if(days>0){
              i.days = _this.dateDiff(i.start_time)[0]
              i.hours =0
              i.minutes =0
            }else if(days==0&_this.dateDiff(i.start_time)[1]>0){
              i.days = 0
              i.minutes =0
              i.hours = _this.dateDiff(i.start_time)[1]                            
            }else if(_this.dateDiff(i.start_time)[1] == 0){
              i.days = 0
              i.hours =0
              i.minutes = _this.dateDiff(i.start_time)[2]
            }else if(_this.dateDiff(i.start_time)[2] ==0){
              i.Isend = 1 
            }else{
              i.Isend = 0
            }
            if (i["age_grade"] == "Teenagers") {
              i["age_grade"] = "青少年";
            } else if (i["age_grade"] == "Childhood") {
              i["age_grade"] = "儿童";
            } else if (i["age_grade"] == "University Student") {
              i["age_grade"] = "大学生";
            } else if (i["age_grade"] == "Adult") {
              i["age_grade"] = "成年";
            }

            if (i["language_level"] == "Zero basis") {
              i["language_level"] = "零基础";
            } else if (i["language_level"] == "Senior") {
              i["language_level"] = "高级";
            } else if (i["language_level"] == "Intermediate") {
              i["language_level"] = "中级";
            } else if (i["language_level"] == "Primary") {
              i["language_level"] = "初级";
            }
            _this.languageEn.forEach(function(j) {
              if (j[i["language"]]) {
                i["language"] = j[i["language"]];
              }
            });
          });
        })
        .catch(error => {
          console.log(error);
        });
    },
    donwnlaods() {
      this.$router.push({ path: "/views/Download" });
    },
    Toagenc(e){//机构详情
      // if(this.IsLogins){
        let routeData = this.$router.resolve({ path: "/views/Agencdetails",query: {id:e.id,longitude:e.longitude,latitude:e.latitude} });
        this.$router.push({ path: "/views/Agencdetails",query: {id:e.id,longitude:e.longitude,latitude:e.latitude} })
        // window.open(routeData.href, '_blank');
      // }else{
      //   this.$message({duration:1000,message:'请先登录',type:'warning'})
      // }
    },
    GotoLiveclassroomDetial() {
      if(this.IsLogins){
        this.$router.push({path:'views/Liveclassroom/ClassRoomInfo',query:{index:3}})
      }else{
        this.$router.push({path: '/views/LiveclassroomDetial',query:{tablesListindex:3}})
      }
      
      
    },
    gosijiaoList(){
      this.$router.push({ path:'/views/sijiaoList'})
    },
    Toinstitutions(){//机构列表
      this.$router.push({ path:'/views/Listofinstitutions',query: {index:8,}})
    },
    SelectLogin(e) {
      this.LoginWayIndex = e;
    },
    GoLogin() {
      //点击登录
      this.IsLogin = true;
    },
    Toclassroom(e){
      console.log(e,'=>')
      // if(this.IsLogins){
        if(e.Isend ==0){
          this.$router.push({ path:'/views/Teachingcentercoursedetails',query: {id: e.id,index:7,Isend:true}})
        }else{
          this.$router.push({ path:'/views/Teachingcentercoursedetails',query: {id: e.id,index:7,Isend:false}})
        }
      // }else{
      //   this.$message({duration:1000,message:'请先登录',type:'warning'})
      // }
    },
    checkcode() {
      //获取验证码
      var reg = 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/;
      if (this.phoneNumbercode == "") {
        alert("请输入手机号码");
      } else if (!reg.test(this.phoneNumbercode)) {
        alert("手机格式不正确");
      } else {
        this.$axios({
          methods: "get",
          url:
            "http://101.37.66.151:8768/eg-api/user/sms/send?mobile=" +
            this.phoneNumbercode +
            ""
        }).then(res => {
          console.log(res);
          if (res.data.code == 10009) {
            alert(res.data.message);
          }else if(res.data.code == 10006){
            alert(res.data.message)
          } else if (res.data.code == 0) {
            const TIME_COUNT = 60;
            if (!this.timer) {
              this.count = TIME_COUNT;
              this.show = false;
              this.timer = setInterval(() => {
                if (this.count > 0 && this.count <= TIME_COUNT) {
                  this.count--;
                } else {
                  this.show = true;
                  clearInterval(this.timer);
                  this.timer = null;
                }
              }, 1000);
            }
            alert(res.data.message);
          }
        });
      }
    },
    GoPasswordCode() {
      //验证码登录方法
      var data = {
        login_name: this.phoneNumbercode,
        verification_code: this.Code,
        login_type: "2"
      };
      this.$axios({
        method: "post",
        url: "http://101.37.66.151:8768/eg-api/user/user/login",
        data: data
      })
        .then(res => {
          //这里使用了ES6的语法
          console.log(res.data); //请求成功返回的数据
          if (res.data.code == 0) {
            var userinfo = res.data.data.userInfoEntity;
            console.log(userinfo);
            localStorage.setItem(
              "userinfo",
              JSON.stringify(res.data.data.userInfoEntity)
            );
            localStorage.setItem(
              "userSign",
              JSON.stringify(res.data.data.userSign)
            );
            this.$router.push({ path: "/views/Personalcenter" ,query: {index:1}});
          } else if (res.data.code == 10005) {
            alert(res.data.message);
          }
        })
        .catch(error => {
          console.log(error); //请求失败返回的数据
        });
    },
    Topersonil() {
      this.$router.push({ path: "/views/Personalcenter" ,query: {index:1}})
    },
    GoPassword() {
      console.log(typeof this.phoneNumber);
      var data = {
        login_name: this.phoneNumber,
        login_pass: this.Password,
        login_type: "1"
      };
      this.$axios({
        method: "post",
        url: "http://101.37.66.151:8768/eg-api/user/user/login",
        data: data
      })
        .then(res => {
          //这里使用了ES6的语法
          console.log(res.data); //请求成功返回的数据
          if (res.data.code == 0) {
            var userinfo = res.data.data.userInfoEntity;
            console.log(userinfo);
            localStorage.setItem(
              "userinfo",
              JSON.stringify(res.data.data.userInfoEntity)
            );
            localStorage.setItem(
              "userSign",
              JSON.stringify(res.data.data.userSign)
            );
            this.$router.push({ path: "/views/Personalcenter",query: {index:1,}})
          } else if (res.data.code == 10005) {
            alert(res.data.message);
          }
        })
        .catch(error => {
          console.log(error); //请求失败返回的数据
        });
    },
    GoLgCode(e) {
      //登录验证等
      this.IsLogin = true;
      console.log(this.password);
      if ((this.IsLogin = false)) {
        console.log("00");
        if (this.phoneNumber == "") {
          alert("请输入手机号码");
        }
      } else {
        if (this.Code == "" || this.phoneNumber == "") {
          alert("请输入手机号码或验证码");
        } else {
        }
      }
    },
    Getjigouinfo(){//机构列表
      var _this = this
      console.log(_this.longitude,'00000')
      var data = {
        latitude:localStorage.getItem('latitude'),
        longitude:localStorage.getItem('longitude'),
        status:2,
        type:'offline_mechanism'
      }
      this.$axios({
        method: "get",
        url:"http://101.37.66.151:8768/eg-api/user/mastermechanism/queryNearbyListPage",
        params: data}).then(res => {
          console.log(res.data.data,'机构')
          _this.affiliatesImg = res.data.data
      }).catch(error => {
        console.log(error);
      });
    }
  },
  mounted() {
    var _this = this
    var map = new BMap.Map("allmap");
    var point = new BMap.Point(116.331398,39.897445);
    map.centerAndZoom(point,12);
    var geolocation = new BMap.Geolocation();
    geolocation.getCurrentPosition(function(r){
      if(this.getStatus() == BMAP_STATUS_SUCCESS){
        var mk = new BMap.Marker(r.point);
        map.addOverlay(mk);
        map.panTo(r.point);
        _this.latitude = r.point.lat
        _this.longitude = r.point.lng
      }
      else {
        alert('failed'+_this.getStatus());
      }        
    },{enableHighAccuracy: true})
    new Swiper(".swiper-container", {
      //初始化swiper轮播图
      loop: true, // 循环模式选项
      pagination: {
        //绑定分页器
        el: ".swiper-pagination",
        clickable: true
      },
      autoplay: {
        //设置自动切换时间
        delay: 5000
      }
    });
    setTimeout(()=>{
        var swiper = new Swiper('.swiper-containers', {
          slidesPerView: 5,
          spaceBetween: 30,
          centeredSlides: true,
          observer:true,
          initialSlide :2,
          observeParents:true,
          loop: true,
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
          },
        });
    },200)

    
    window.addEventListener("scroll", _this.Monitorscroll);
    _this.getCitiesList()
    _this.getclasslist();
    if (_this.unserinfo == undefined || _this.userinfo == "") {
      _this.IsLogins = false;
    } else {
      _this.IsLogins = true;
    }
  },
  components: {//组件注册 
    Footer,
    Carousel3d,
    Slide,
    Denglu
  }
};
</script>
<style scoped lang="less">
@import './hover.css';
@import './nav.css';
.Head-portrait{
    height: 174px;
    span{
      position: absolute;
      top: 369px;
      left: 113px;
    }
    /deep/.avatar-uploader{
        width: 174px;
        height: 174px;
    }
    .avatar{
      width: 100px;
      height: 100px;
      position: absolute;
      border-radius: 100px;
      left: 72px;
      top: 411px;
    }
    i{
        color:  #C0C0C0;
        font-size: 12px;
        width: 10%;
        height: 174px;
        line-height: 174px;
        padding-left: 4%;
    }
}
.title{
  width: 50px;
  height: 50px;
  border-radius: 25px;
}


.userAvatar{
  width: 50px;
  height: 50px;
  border-radius: 25px;
  position: relative;
  top: -8px;
}
input {
  /*给所有的input输入框添加鼠标样式*/
  cursor: pointer;
  /* padding-left: 20px; */
}
@media (min-width: 30px) and (max-width: 1400px){
  .index {
    width: auto;
    min-width: 1400px;
    height: auto;
  }
}
@media screen and (min-width: 1400px) {
  .index {
    width: 100%;
    min-width: 1400px;
    height: 100%;
  }
}

/*banner图样式*/
.banner {
  width: 100%;
  background-size: 100% 100%;
  margin: 0;
  margin-top: -60px;
  padding: 0;
  top: 79px;
  position: absolute;
}
.swiperd-1 {
  min-width: 1400px;
  width: 100%;
  height: 480px;
  background-image: url("/images/banner1.png");
  background-size: cover;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.swiperd-2 {
  width: 100%;
  min-width: 1400px;
  height: 480px;
  background-image: url("/images/banner2.png");
  background-size: cover;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.swiperd-3 {
  min-width: 1400px;
  width: 100%;
  height: 480px;
  background-image: url("/images/banner3 拷贝@2x.png");
  background-size: cover;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
@media screen and (max-width: 100%){
  .swiperd-3 {
      width: 1414px;
  }
}

.banners {
  position: relative;
  width: 1400px;
  margin: 0 auto;
  height: 60px;
  z-index: 1000;
  top: 70px;
}
.banner-head {
  position: relative;
  width: 100%;
  margin: 0 auto;
  display: flex;
  height: 60px;
}
.logo {
  display: flex;
  text-align: left;
  width: 250px;
  width: 50%;
  height: 50px;
  img{
    width: 200px;
    height: 34px;
    margin-top: 13px;
  }
}
.banner-headright {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 50%;
}
.banner-headright div {
  width: 30%;
  // text-align: right;
}
.download {
  cursor: pointer;
  width: 100px;
  height: 20px;
}
.download span {
  background-image: url("/images/下载.png");
  background-repeat: no-repeat;
  background-position: 100%;
  color: #ffffff;
  padding-right: 20px;
}
.search {
  width: 245px;
}
.search input {
  width: 100%;
  height: 35px;
  border: 1px solid rgba(255, 255, 255, 1);
  border-radius: 18px;
  outline: none;
  padding-left: 20px;
}
.login button {
  width: 91px;
  height: 35px;
  background: rgba(255, 255, 255, 1);
  border-radius: 18px;
  border: none;
  margin-left: 10px;
  color: #64c6c9;
  cursor: pointer;
  outline: none;
}
.login button:last-child {
  background: none;
  border: 1px solid #ffffff;
  color: #ffffff;
}
.bannerform {
  width: 23.5%;
  justify-content: flex-end;
  height: 320px;
  background-image: url("/images/活动框背景.png");
  border-radius: 18px;
  background-size: 100% 100%;
  z-index: 1000;
  margin-left: auto;
  margin-top: 9px;
}
/*导航样式*/
.nav {
  display: flex;
  width: 100%;
  height: 100px;
  margin-top: 540px;
  border-bottom: 2px solid #47cecf;
}
.nav > div {
  position: relative;
  width: 1400px;
  height: 100px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.nav > div > div {
  width: 50%;
  height: 100px;
  line-height: 100px;
  span {
    color: #c2c2c2;
    font-size: 14px;
  }
  /deep/.el-select {
    width: 30%;
    margin-left: 2%;
  }
  /deep/.el-input__inner {
    border-radius: 20px;
    border: 1px #47cecf solid;
    font-weight: bold;
    color: #47cecf;
  }
}
.nav ul {
  width: 50%;
  height: 100px;
  line-height: 100px;
  list-style: none;
  justify-content: flex-end;
  align-items: flex-end;
  display: flex;
  padding: 0%;
}
.nav ul li {
  width: 10%;
  height: 100px;
  text-align: right;
  cursor: pointer;
}
.navelecet {
  color: #47cecf;
  font-weight: bold;
}
/*手机验证码样式*/
.form-banner {
  display: flex;
  width: 80%;
  flex-wrap: wrap;
  align-items: center;
  height: 40%;
  margin: 0 auto;
  font-size: 14px;
  padding-top: 40%;
}
.form-banner > label {
  width: 100%;
  display: block;
  height: 36px;
  margin-top: 20px;
  text-align: center;
  &:last-child{
    input{
      height: 36px!important;
      width: 90%!important;
    } 
  }
}
.form-banner > label > input {
  width: 80%;
  height: 36px;
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(71, 206, 207, 1);
  border-radius: 18px;
  outline: none;
  padding-left: 20px;
}
.inputcode {
  width: 46% !important;
  display: inline-block;
  -webkit-appearance: none !important;
  margin: 0;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  /*去掉type为number是的箭头*/
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}
.getcode {
  width: 30% !important;
  margin-left: 12px;
  color: #47cecf;
  padding: 0 !important;
}
.sendcode {
  background: rgba(42, 189, 190, 1) !important;
  border-radius: 18px;
  color: #ffffff;
  font-size: 16px;
}
/*内容样式*/
.content {
  position: relative;
  width: 1400px;
  height: auto;
  margin: 0 auto;
}
.head-content {
  width: 100%;
  height: auto;
  margin-top: 100px;
}
.head-contents {
  display: flex;
  width: 100%;
  height: auto;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  p{
    width: 100%;
    text-align: center;
    color: #D1D1D1;
    font-size: 18px;
  }
}
.head-contents span {
  padding-left: 30px;
  padding-right: 30px;
  font-weight: bold;
  font-size: 28px;
}
.i-left {
  width: 93px;
  height: 15px;
  background-image: url("/images/标题点缀2.png");
  background-size: 100%;
}
.i-right {
  width: 93px;
  height: 15px;
  background-image: url("/images/标题点缀1.png");
  background-size: 100%;
}
.head-box {
  display: flex;
  margin-top: 50px;
}
.head-box ul {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  margin: 10px;
  justify-content: space-between;
  padding: 0;
  margin: 0 auto;
}
.head-box ul li {
  list-style: none;
  width: 17.5%;
 
  border: 1px solid #e7e7e7;
  background: #ffffff;
  border-radius: 15px;
  overflow: auto;
  cursor: pointer;
}
.head-box > ul > li:hover {
  // box-shadow: 8px 18px 4px rgba(0, 0, 0, 0.4);
   box-shadow: 2px 14px 6px rgba(0, 0, 0, 0.1);
}
.box-img {
  width: 100%;
  height: 194px;
}
.Classidentification {
  display: flex;
  align-items: center;
  width: 18%;
  height: 32px;
  position: absolute;
  top: 100px;
}
.Classidentification span {
  margin-left: auto;
  width: 88px;
  align-items: center;
  height: 32px;
  font-size: 12px;
  text-align: center;
  line-height: 32px;
  color: #00b6b7;
  /* border-radius: 20px; */
  background: #ffffff;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
}
.about-box {
  width: 90%;
  height: 106px;
  left: 20px;
  overflow: hidden;
  background: #ffffff;
  margin: 0 auto;
  padding: 0;
}
.about-box > p {
  padding: 0;
  margin: 0px;
  height: 33px;
  font-weight: bold;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.about-box > p > span {
  height: 33px;
  line-height: 33px;
}
.audition {
  float: right;
  width: 83px;
  height: 33px;
  border: 1px solid rgba(71, 206, 207, 1);
  border-radius: 20px;
  line-height: 33px;
  color: #47cecf;
  text-align: center;
  background-image: url("/images/多边形 2 拷贝.png");
  background-repeat: no-repeat;
  background-position: 93%;
  padding-left: 0px;
}
.Themodule {
  width: 100%;
  display: flex;
  margin-top: 150px;
  align-items: center;
  justify-content: center;
}
/*外语直播讲师样式*/
.liveinstructor {
  position: relative;
  width: 100%;
  height: auto;
  margin-top: 100px;
}
.liveinstructor-box {
  width: 80%;
  margin: 0 auto;
  display: flex;
  margin-top: 40px;
}
.liveinstructor-box ul {
  list-style: none;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: wrap;
}
.liveinstructor-box ul li {
  display: flex;
  box-sizing: border-box;
  width: 25%;
  height: 200px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 30px;
}
.liveinstructor-box ul li > div {
  width: 100%;
  text-align: center;
}
.liveinstructor-box ul li > div > span {
  text-align: center;
  display: inline-block;
  width: 100%;
  font-size: 18px;
  color: #47cecf;
}
/*招募样式*/
.recruiting {
  position: relative;
  width: 100%;
  height: 376px;
  margin-top: 50px;
  background-image: url("/images/招募背景.png");
}
.recruiting-head {
  display: flex;
  width: 1400px;
  height: 60px;
  justify-content: center;
  margin: 0 auto;
  padding-top: 40px;
}
.recruiting-con {
  display: flex;
  width: 1400px;
  height: 198px;
  align-items: center;
  justify-content: space-between;
  margin: 0 auto;
}
.recruiting-con > div {
  text-align: center;
  width: 33%;
}
.reservedphone {
  float: left;
  width: 100%;
  height: 198px;
  border: 1px solid rgba(255, 255, 255, 1);
  text-align: center;
  line-height: 198px;
}
.reservedphone > input {
  display: block;
  flex-wrap: wrap;
  width: 80%;
  height: 41px;
  background: rgba(71, 206, 207, 1);
  border: 1px solid rgba(255, 255, 255, 1);
  border-radius: 21px;
  outline: none;
  text-align: center;
  margin: 0 auto;
  margin-top: 30px;
  color:#47cecf;
}
.reservedphone > input::-webkit-input-placeholder {
  color: #ffffff;
}
.Sendresume > span {
  float: left;
  width: 100%;
  height: 198px;
  border: 1px solid rgba(255, 255, 255, 1);
  color: #ffffff;
  text-align: center;
  padding-left: 20px;
  padding-right: 20px;
}
.Sendresume > span > label {
  float: left;
  margin-top: 80px;
  letter-spacing: 4px;
}
/*登录样式*/
.over{
 position: fixed;
    width: 100%;
    height: 100%;
    opacity: 0.7;
    filter: alpha(opacity=70);
    top: 0;
    left: 0;
    z-index: 1002;
    background-color: #111111;
}
.IsLogin {
  // background-image: none !important;
  background: #ffffff;
  width: 330px;
  height: 321px;
  position: fixed;
  top: 23%;
  left: 44%;
  z-index: 1003;
  ul {
    list-style: none;
    display: flex;
    width: 100%;
    height: 60px;
    padding: 0;
    line-height: 60px;
    text-align: center;
    li {
      flex: 1;
      height: 100%;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-weight: bold;
    }
  }
}
.selcclass {
  color: #47cecf;
}
.form-Login-phone {
  position: relative;
  width: 80%;
  height: 260px;
  margin: 0 auto;
  label {
    display: flex;
    width: 100%;
    height: 40px;
    margin-top: 20px;
    input {
      width: 100%;
      height: 100%;
      background: rgba(255, 255, 255, 1);
      border: 1px solid rgba(71, 206, 207, 1);
      border-radius: 18px;
      outline: none;
    }
  }
  .inputcodes {
    width: 60%;
  }
  .form-Login-phone > label > input:first-child {
    padding-left: 4% !important;
  }
  .getcodes {
    display: inline-block;
    width: 35%;
    height: 40px;
    line-height: 40px;
    border-radius: 20px;
    text-align: center;
    margin-left: auto;
    color: #47cecf;
    font-size: 14px;
    padding: 0;
    border: 1px solid #47cecf;
  }
  .sendcodes {
    background: #2abdbe;
    color: #ffffff;
    font-size: 16px;
  }
}
/*密码登录样式*/
.pass-logo {
  position: relative;
  width: 80%;
  height: 260px;
  margin: 0 auto;
  label {
    display: block;
    width: 100%;
    height: 40px;
    width: 262px;
    margin-top: 20px;
    input {
      width: 100%;
      height: 100%;
      background: rgba(255, 255, 255, 1);
      border: 1px solid rgba(71, 206, 207, 1);
      border-radius: 18px;
      outline: none;
      text-align: center;
    }
  }
}
/*获取验证码后的样式*/
.countdisabled {
  color: #000 !important;
}
.registered {
  position: relative;
  margin: 0 auto;
  input {
    width: 90%;
    height: 40px;
    padding-left: 4%;
    border-radius: 15px;
    border: 1px solid #f3f3f3;
    outline: none;
    background: #f3f3f3;
  }
}
.registered-code {
  position: relative;
  width: 100%;
  margin-top: 30px;
  input {
    width: 60%;
    height: 40px;
    padding-left: 4%;
    border-radius: 15px;
    border: 1px solid #f3f3f3;
    outline: none;
    background: #f3f3f3;
    margin-top: 25px;
  }
  span {
    display: inline-block;
    width: 26%;
    margin-left: 4%;
    height: 40px;
    line-height: 40px;
    background: #32c1c2;
    text-align: center;
    color: #ffffff;
    border-radius: 15px;
    cursor: pointer;
  }
}
.registration-information {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  label {
    width: 100%;
    height: 40px;
    margin-top: 30px;
    &:first-child {
      margin-top: 25px;
    }
  }
}
.password{
  width: 100%;
  input {
    width: 90%;
    height: 40px;
    padding-left: 4%;
    border-radius: 15px;
    border: 1px solid #f3f3f3;
    outline: none;
    background: #f3f3f3;
  }
}
.nickname {
  width: 100%;
  input {
    width: 90%;
    height: 40px;
    padding-left: 4%;
    border-radius: 15px;
    border: 1px solid #f3f3f3;
    outline: none;
    background: #f3f3f3;
  }
}
.registration-sex {
  line-height: 40px;
  /deep/.el-radio-group {
    display: flex;
    width: 60%;
    height: 40px;
    float: right;
    label {
      width: 50%;
      height: 100%;
      border-radius: 5px;
      margin: 0%;
      span {
        display: inline-block;
        width: 80%;
        background: #f3f3f3;
        border-radius: 15px;
      }
      /deep/.el-radio-button__orig-radio:checked + .el-radio-button__inner {
        background: #32c1c2;
      }
    }
  }
}
.registration-timer {
  width: 100%;
  .el-date-editor.el-input{
    width: 494px;
  }
  /deep/.el-date-editor--month {
    width: 93%;
    height: 40px;
    border-radius: 15px;
    outline: none;
    /deep/.el-input__inner {
      width: 100% !important;
      // padding-left: 0;
      border-radius: 15px;
      height: 40px;
      background: #f3f3f3;
    }
  }
}
.Personal-interests {
  /deep/.el-select {
    width: 93%;
    height: 40px;
    border-radius: 15px;
    /deep/.el-input--suffix {
      width: 100%;
      height: 40px;
      border-radius: 15px;
      /deep/.el-input__inner {
        width: 100%;
        height: 40px;
        border-radius: 15px;
        background: #f3f3f3;
        border: none;
      }
    }
  }
}
body{
  /deep/ .el-menu{
    position: relative;
    top: 12px;
    text-align: center;
  }
} 
.login {
  width: 210px;
  height: 40px;
  display: flex;
  margin-top: 6px;
  /deep/ .is-opened {
    background: none;
  }
  /deep/ .el-menu-demo {
    // width: 100%;
    background: none;
    border: none;
    margin-left: auto;
    /deep/ .el-submenu__title{
      background: none;
    }
    /deep/ .el-submenu__title:hover{
      background: none;
    }
  }
  
}
.login /deep/.el-submenu__title {
  width: 120px !important;
  height: 40px !important;
  background: rgba(255, 255, 255, 1);
  border-radius: 18px;
  line-height: 40px !important;
  color: #64c6c9 !important;
}
.nodatads{
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  img{
    width: 39px!important;
  }
  span{
    display: inline-block;
    width: 100%;
    text-align: center;
    margin-top: 10px;
    color: #e7e7e7;
  }
}
.animate-text{
  text-decoration: underline;
}
.tug{
  margin-top: 140px;
  width: 100%;
  /deep/.carousel-3d-container{
    margin-top: 40px;
    border-radius: 20px;
    .carousel-3d-slide.current{
      border-radius: 20px;
    }
  }
}
.affiliates-content{
  position: relative;
  width: 100%;
  ul{
    list-style: none;
    padding: 0;
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    // justify-content: space-between;
    li{
      display: inline-block;
      width: 340px;
      height: 188px;
      background: #EEEEEE;
      margin-top: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      flex-wrap: wrap;
      margin-left: 10px;
      overflow: hidden;
      &:nth-child(1),&:nth-child(5),&:nth-child(9){
        margin-left: 0%;
      }
      .tu{
        cursor: pointer;
        // width: 124px;
        // height: 124px;
        width: 100%;
        height: 100%;
        margin-left: -100px;
        margin-top: -30px;
      }
    }
  }
} 
.cards{
  .swiper-containers {
    width: 100%;
    height: 343px;
    overflow: hidden;
    margin-top: 30px;
  }
  .swiper-slide {
    text-align: center;
    font-size: 18px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
	  transition: 300ms;
    transform: scale(0.8);
    border-radius: 20px;
  }
	.swiper-slide-active,.swiper-slide-duplicate-active{
    transform: scale(1);
    width: 263px!important;
    background-size: cover;
  }
  .swiper-slide{
    background-size: cover;
  }
}
.lookAll{
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 60px;
  span{
    width:138px;
    height:45px;
    background:rgba(71,206,207,1);
    border-radius:23px;
    color: #FFFFFF;
    font-size: 18px;
    line-height: 45px;
    text-align: center;
    cursor: pointer;
  }
}  
</style>